<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>使用统计</span>
      </div>
      <div>
        <el-row>
          <el-col :span="6">{{ statistics.unFinished }}</el-col>
          <el-col :span="6">{{ statistics.weekFinished }}</el-col>
          <el-col :span="6">{{ statistics.monthFinished }}</el-col>
          <el-col :span="6">{{ statistics.totalFinished }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">待完成保单</el-col>
          <el-col :span="6">上周完成保单</el-col>
          <el-col :span="6">上个月完成保单</el-col>
          <el-col :span="6">已完成保单</el-col>
        </el-row>
      </div>
    </el-card>
    <el-divider />
    <el-row>
      <el-col :span="12">
        <div>
          <ve-line :data="dayData" :settings="chartSettings" />
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <ve-line :data="weekData" :settings="chartSettings" />
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  data() {
    this.chartSettings = {
      labelMap: {
        day: '每日完成数量',
        week: '每周完成数量'
      }
    }
    return {
      dayData: {
        columns: ['date', 'day'],
        rows: null
      },
      weekData: {
        columns: ['date', 'week'],
        rows: null
      },
      statistics: {
        totalFinished: null,
        unFinished: null,
        weekFinished: null,
        monthFinished: null
      }
    }
  },
  created() {
    this.getDayData()
    this.getWeekData()
    this.getStatistics()
  },
  methods: {
    getDayData() {
      this.$axios.get(`task/countTaskForDay/${this.global.user.id}`).then((res) => {
        this.dayData.rows = res.data.data
      })
    },
    getWeekData() {
      this.$axios.get(`task/countTaskForWeek/${this.global.user.id}`).then((res) => {
        this.weekData.rows = res.data.data
      })
    },
    getStatistics() {
      this.$axios.get(`task/getStatistics/${this.global.user.id}`).then((res) => {
        this.statistics = res.data.data
      })
    }
  }
}
</script>

<style>
  .el-col {
    border-radius: 4px;
    text-align:center
  }
</style>
